<template>
    <li>
        <div class="shownew">
            <i v-if="hasChild"
               class="iconfont"
               @click="toggle(model)"
               v-bind:class="[open ? 'icon-jinru iconfontss': 'icon-jinru']"></i>
            <i v-if="!hasChild"
               class="icon file-text"
               @click="toggle(model)"></i>
            <span @click="changemsg(model)"
                  class="newmsgclass">{{model.Name}}</span>
        </div>
        <ul v-show="open"
            v-if="hasChild"
            class="showul">
            <treemenu v-for="(item,index) in model.Children"
                      v-bind:model="item"
                      v-bind:key="index"></treemenu>
        </ul>

    </li>
</template>

<script>
export default {
    name: 'treemenu',
    props: ['model'],
    data () {
        return {
            open: false,
            index: 0,
            memberWork: ''
        }
    },
    computed: {
        hasChild () {
            return this.model.Children && this.model.Children.length
        }
    },
    mounted () {
        this.type = this.$route.query.type
        this.memberWork = this.$route.query.memberWork
        this.index = this.$route.query.index
    },
    methods: {
        toggle () {
            if (this.hasChild) {
                this.open = !this.open
            } else {
                // localStorage.baseList = JSON.stringify(this.model);
                // // this.$store.state.checkcompany = this.model;
                //   this.$store.state.checkcompany =Object.assign({},this.$store.state.checkcompany,{
                //           "deptName": this.$store.state.checkcompany.Name,
                //            "deptId":this.$store.state.checkcompany.Id,
                //  })
                this.$router.back()
            }
        },
        changemsg () {
            this.$store.state.checkcompany = Object.assign({}, this.$store.state.checkcompany, {
                'Name': this.model.Name,
                'newdepId': this.model.Id
            })
            this.$router.back()
        }
    }
}
</script>

<style>
.showul {
    list-style: none;
    padding-left: 20px;
}
.showul:last-child {
}
li {
    padding: 3px 0;
}
li:first-child {
}
li > span {
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
}

i.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.icon.folder {
}

.icon.folder-open {
}

.icon.file-text {
}

.tree-menu li {
    line-height: 3;
}
.iconfont {
    margin-right: 5px;
}
.iconfont.iconfontss {
    display: inline-block;
    transform: rotate(90deg);
}
.shownew {
    overflow: hidden;
    height: 40px;
    padding-right: 20px;
    display: flex;
    align-items: center;
}
.newmsgclass {
    display: inline-block;
    /* height: 100%; */
    vertical-align: middle;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
}
</style>
